<script setup lang="ts">
import { ref, onMounted, computed, watch, nextTick, defineProps, defineEmits } from 'vue'
import { usePlayerStore } from '../stores/player'
import { storeToRefs } from 'pinia'
import type { SongListType, ShareDataType } from '../types'
import { Toast } from 'vant';

const props = defineProps({
    currentTime: Number,
    duration: Number,

})
const playerStore = usePlayerStore()
const { songObj, isPlay, songList, songLyric } = storeToRefs(playerStore)
const show = ref(false);
const lyricIndex = ref(0);
const lyricDom = ref()
const showShare = ref(false);
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];
const emit = defineEmits(['set-play-state', 'set-audio-currentTime', 'setSongLyric', 'set-full-screen'])
const showPopup = () => {
    show.value = true;
}

const onClickLeft = () => {

    emit('set-full-screen', false)

}

// 点击暂停或播放歌曲
const changePlayState = () => {
    emit('set-play-state')

}
// 点击切换歌曲
const changePlaySong = (item: SongListType) => {

    // emit('setSongLyric')
    playerStore.changeBallStateActions(item)
    // playerStore.changeSongLyric(props.currentTime)
}

// 通过计算总时长与当前播放时长监听滑块的值
const durationVal = computed({
    get: () => {
        if (props.duration && props.currentTime) {
            return Math.ceil((props.currentTime * 100) / props.duration)
        }
        return 1
    },
    set: (val: number) => {
        // console.log("修改的值", val);
        if (props.duration) {
            let num = Math.ceil((val * props.duration) / 100);
            emit('set-audio-currentTime', num)
        }
    },

})
watch(
    () => props.currentTime,
    (newVal, oldVal) => {
        for (let i = 0; i < songLyric.value.length; i++) {
            if (i >= songLyric.value.length - 1) {
                lyricIndex.value = i;
                break;
            }
            let time = songLyric.value[i].time;
            let nextTime = songLyric.value[i + 1].time;
            if (oldVal as number >= time && oldVal as number < nextTime) {
                lyricIndex.value = i;
                lyricDom.value.style.transform = `translateY(${-(30 * (i))}px)`
                break;
            }
        }
    },
)
onMounted(() => {
    // console.log(songObj.value);

})
// 添加到我喜欢的音乐
const addLikeMusic = () => {
    songObj.value.selected = !songObj.value.selected;
    if (songObj.value.selected) {
        Toast({
            message: '成功添加到我喜欢的音乐',
            position: 'top',
        });
        playerStore.addLikeMusicActions(songObj.value)

    } else {
        Toast({
            message: '取消收藏成功',
            position: 'top',
        });
        playerStore.delLikeMusicActions(songObj.value)

    }

}
const onSelect = (option: ShareDataType) => {
    Toast(option.name);
    showShare.value = false;
};

</script>

<template>
    <div class="paly-control">
        <!-- <img src="../assets/imgs/ballad.jpg" class="bg-img"> -->
        <!-- 歌曲标题 -->
        <van-nav-bar :title="songObj?.title" left-arrow :border="false" @click-left="onClickLeft">
            <template #right>
                <van-icon name="music-o" size="20" />
            </template>
        </van-nav-bar>
        <!-- 歌曲背景图 -->
        <div class="song-img">
            <!-- <img :src="songObj?.al.picUrl"> -->
            <van-image lazy-load :src="songObj?.al.picUrl" />

        </div>
        <!-- 歌词 -->
        <div class="lyric-container">
            <div class="song-lyric" ref="lyricDom">
                <p v-for="(item, index) in songLyric" :key="index" :class="{ active: index == lyricIndex }">
                    {{ item.lyc }}
                </p>
            </div>
        </div>

        <!-- 关注歌手 -->
        <div class="song-text">
            <p class="van-ellipsis">{{ songObj?.name }}</p>
            <p>{{ songObj?.ar[0].name }}<span>关注</span></p>
        </div>
        <!-- 列表图标 -->
        <div class="icon-item">
            <p class="left">
                <i @click="addLikeMusic" :class="{ selected: songObj?.selected }"></i>
                <i></i>
                <i @click="showShare = true"></i>
            </p>
            <p class="right">
                <i @click="showPopup"></i>
                <i></i>
            </p>
        </div>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
        <!-- 播放进度条 -->
        <div class="progress-bar">
            <div class="icon-play" @click.stop="changePlayState" :class="isPlay ? 'icon-pause' : 'icon-play'"></div>
            <div class="progress">
                <van-slider v-model="durationVal" :min="0" :max="100">
                    <template #button>
                        <div class="custom-button"></div>
                    </template>
                </van-slider>
            </div>
        </div>
        <!-- 音乐列表 -->
        <van-popup v-model:show="show" round position="bottom" :style="{ height: '60%', backgroundColor: '#292929' }">
            <div class="pop-container">
                <div class="icon-title"></div>
                <div class="pop-header">
                    <p>播放列表 <span style="color:#646566">({{ songList.length }})</span></p>
                    <p>
                        <i class="icon-list"></i>
                        <span>顺序播放</span>
                    </p>
                </div>
                <div class="ball-pulse">

                </div>
                <div class="pop-list" v-if="songList.length">
                    <div class="pop-item" v-for="item in songList" :key="item.id" @click.stop="changePlaySong(item)">
                        <!-- <img :src="item.al.picUrl"> -->
                        <van-image lazy-load :src="item.al.picUrl" />
                        <div class="pop-text">
                            <p class="van-ellipsis name">{{ item.name }}</p>
                            <div class=" van-ellipsis pub">
                                <p v-for="a in item.ar">
                                    <span>
                                        {{ a.name }}
                                    </span>
                                </p>
                                <span class=""> · {{ item.name }}</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </van-popup>
    </div>
</template>

<style lang="scss">
.paly-control {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to bottom, #293d48, #000000);
    z-index: 30;


    audio {
        position: absolute;
        top: 55%;
    }

    .bg-img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        filter: blur(100px);
        // background-image: linear-gradient(to bottom right, #293d48, #000000);

    }

    .van-nav-bar {
        background-color: transparent;

        .van-icon {
            font-size: 20px;
            color: #a6b0bb;
        }

        .van-nav-bar__title {
            color: #fff;

        }
    }

    .song-img {
        margin-bottom: 100px;
        padding: 25px 16px;
        height: 350px;

        .van-image {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
        }
    }

    .lyric-container {
        position: absolute;
        top: 63%;
        padding: 0 16px;
        height: 30px;

        line-height: 30px;
        overflow: hidden;

        .song-lyric {
            font-size: 14px;
            color: #ddd;
            overflow: auto;

            p {

                height: 30px;
            }

            .active {
                color: #3d92b6;
            }
        }
    }



    .song-text {
        padding: 0 16px;
        color: #fff;

        p {
            line-height: 16px;

            &:nth-of-type(2) {
                margin-top: 10px;
                color: #ddd;
                font-size: 14px;

                span {
                    display: inline-block;
                    padding: 2px;
                    margin-left: 5px;
                    border-radius: 999px;
                    font-size: 12px;
                    background-color: rgba(111, 108, 108, .5);
                }
            }
        }
    }

    .icon-item {

        display: flex;
        padding: 20px 16px;
        color: #fff;

        .left {
            flex: 4;

            i {
                display: inline-block;
                margin-right: 40px;
                width: 30px;
                height: 30px;
                background-repeat: no-repeat;
                background-size: cover;

                &:nth-of-type(1) {
                    background-image: url('@/assets/imgs/share/arch_collect_white.webp');

                }

                &.selected {
                    background-image: url('@/assets/imgs/share/arch_collect_red.webp');

                }

                &:nth-of-type(2) {
                    background-image: url('@/assets/imgs/share/playing_comment.png');

                }


                &:nth-of-type(3) {
                    background-image: url('@/assets/imgs/share/playing_share.png');

                }


            }



        }

        .right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;

            i {
                display: inline-block;
                width: 21px;
                height: 21px;
                background-repeat: no-repeat;
                background-size: cover;

                &:nth-of-type(1) {
                    background-image: url('@/assets/imgs/play/play_list.png');

                }

                &:nth-of-type(2) {
                    background-image: url('@/assets/imgs/play/cntt.png');

                }
            }
        }
    }

    .progress-bar {
        display: flex;
        padding: 0 16px;

        .icon-play,
        .icon-pause {
            margin-right: 10px;
            flex: 0 0 21px;
            width: 21px;
            height: 30px;
            background-image: url('@/assets/imgs/play/arch_play_btn_play.png');
            background-repeat: no-repeat;
            background-size: cover;
            transform: scale(.7);

        }

        .icon-pause {
            margin-right: 7px;
            flex: 0 0 24px;
            width: 24px;

            background-image: url('@/assets/imgs/play/arch_play_btn_pause.png');

        }

        .progress {
            flex: 1;
            align-self: center;

            .van-slider {
                background-color: rgba(255, 255, 255, .3);
            }

            .van-slider__bar {
                background-color: #fff;

            }

            .custom-button {
                width: 5px;
                height: 5px;
                color: #fff;
                font-size: 10px;
                line-height: 18px;
                text-align: center;
                background-color: #fff;
                border-radius: 999px;
            }
        }

    }

    .icon-title {
        margin: 0 auto;
        margin-top: 10px;
        width: 25px;
        height: 3px;
        line-height: 5px;
        border-radius: 999px;
        background-color: #737373;
    }

    .pop-container {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

    }


    .pop-header {
        position: absolute;
        top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 16px;
        width: calc(100% - 32px);
        height: 46px;
        letter-spacing: 1px;
        font-size: 14px;
        color: #fff;

        p {
            &:nth-of-type(2) {
                display: flex;
                align-items: center;
                color: #646566;
                font-size: 12px;

                .icon-list {
                    display: inline-block;
                    margin-right: 5px;
                    width: 12px;
                    height: 12px;
                    background-image: url('../assets/imgs/list/loop_play_more.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                }
            }
        }

    }

    .ball-pulse {
        position: absolute;
        top: 20px;
    }

    .pop-list {
        margin: 0 16px;
        margin-top: 114px;
        padding-bottom: 50px;
        height: 100%;
        overflow-y: auto;


        .pop-item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            font-size: 14px;

            &:nth-of-type(1) {
                position: absolute;
                top: 60px;
                width: calc(100% - 32px);
                background-color: #292929;
                z-index: 2;

            }

            img {
                flex: 0 0 50px;
                width: 50px;
                height: 50px;
                border-radius: 2px;

            }

            .pop-text {
                margin-left: 10px;

                color: #ddd;

                // display: flex;
                .name {

                    margin-bottom: 10px;
                    width: 200px;
                }

                .pub {
                    display: flex;
                    width: 250px;
                    font-size: 12px;
                    color: #646566;

                    p {
                        margin-right: 5px;
                    }
                }
            }
        }
    }

}
</style>